import React from 'react'
import {DanluJsBridge,http,logger} from 'common/index'
import {Alert,FormInput} from 'components/index'
import md5  from 'md5'
/**
 * 类别：组件
 * 功能：银行卡
 */
class CheckPassword extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            havePassword : false,
            password : ''
        }
    }
    componentWillMount (nextProps) {
        this.setState({
            havePassword : this.props.havePassword || true
        })
    }

    passwordChange (value){
        this.setState({
            password : value
        })
    }
    //设置支付密码
    setPasswd (){
        var _this = this;
        DanluJsBridge.callHandler('openForgetPassword',function(response){
        })
        // 添加事件监听
        DanluJsBridge.registerHandler('handlerNativeMessage',function(e){
            if (e.event == 'resume') {
                 _this.setState({
                    showCheckPasswd : false
                })
            }
        })
        
    }
    //校验支付密码
    CheckPassword (){
        var reqData = {
            userId : this.props.userId,
            password : md5(this.state.password)
        }
        http.post('/dlpcweb/dlpc/pc/V1/paymentPassword/passwordValidate',reqData).then( data => {
            if (data) {
               this.props.validate();  
           }else{
                DanluJsBridge.callHandler('alert', {
                    title: '提示',
                    message: "密码错误",
                    button: '确定'
                })
           }
            
        })
    }

    render() {
        return (
        	<div className="CheckPassword">
                {/* 弹窗 */}

                    <div >
                        <Alert >
                            <div className="alert-set-passwod">
                                {
                                    this.state.havePassword === false ? (
                                        <div >
                                            <div className="align-center content">
                                                <span> 您还未设置丹露支付密码</span>
                                            </div>
                                            <div >
                                                <div className="fill-item align-center" >
                                                    <button className="cancel-btn cancel" onClick={this.props.cancel}>取 消</button>
                                                </div>
                                                <div className="fill-item align-center setting" >
                                                    <button className="sure-btn " onClick={this.setPasswd.bind(this)}>去设置</button>
                                                </div>
                                            </div>
                                        </div>
                                    ) : (
                                        <div >
                                            <div className="align-center padding10">
                                                <span> 请输入丹露支付密码</span>
                                            </div>
                                            <div className="align-center padding10">
                                                <FormInput type="password" maxLength="16" value={this.state.password} onChange={this.passwordChange.bind(this)}/>
                                            </div>
                                            <div className="align-right padding10">
                                                <a onClick={this.setPasswd.bind(this)}>忘记密码</a>
                                            </div>
                                            <div >
                                                <div className="fill-item align-center" >
                                                    <button className=" cancel" onClick={this.props.cancel}>取消</button>
                                                </div>
                                                <div className="fill-item align-center" >
                                                    <button className={this.state.password ? 'sure-btn' : 'cancel-btn'} disabled={!this.state.password} onClick={this.CheckPassword.bind(this)}>确定</button>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                }

                            </div>
                        </Alert> 
                    </div>
                </div>

        )
    }
}

export default CheckPassword